﻿<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>admin</title>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global_color.css"/>
    <script src="/styles/jquery-3.3.1.js"></script>
    <script language="javascript" type="text/javascript">
        //显示角色详细信息
        function showDetail(flag, a) {
           let detailDiv = a.parentNode.getElementsByTagName("div")[0];
            if (flag) {
                detailDiv.style.display = "block";
            }
            else
                detailDiv.style.display = "none";
        }

        //重置密码
        function resetPwd() {
            // alert("请至少选择一条数据！");
            // document.getElementById("operate_result_info").style.display = "block";
            var roleIds = [];
            $("input[name='checkbox']:checked").each(function (i) {
                roleIds[i] = +$(this).val();
            });
            //给checkbox个name 得到选中那个
            //给value 得到选中的里面的值
            console.log(roleIds);
            $.ajax({
                type: "POST",
                url: "/admin.do/updatePassword",
                headers: {
                    'Content-Type': 'application/json'
                },
                //415请求头不对 需要json请求头
                data: JSON.stringify(roleIds)
                //这是发json数组参数
                // data : "list="+JSON.stringify(roleIds) 这是键值对参数形式
                // data:{name:"roleIds",conditions:JSON.stringify(roleIds)}
                ,
                success: function (resp) {
                    location.reload(true);
                }
            })
        }

        //删除
        function deleteAdmin() {
            var r = window.confirm("确定要删除此管理员吗？");
            document.getElementById("operate_result_info").style.display = "block";
        }

        //全选
        function selectAdmins(inputObj) {
            var inputArray = document.getElementById("datalist").getElementsByTagName("input");
            for (var i = 1; i < inputArray.length; i++) {
                if (inputArray[i].type == "checkbox") {
                    inputArray[i].checked = inputObj.checked;
                }
            }
        }

        $(function () {
            $.ajax({
                type: "GET",
                url: "/admin.do/queryModuleName",
                success: function (resp) {
                    var select = $('#selModules');
                    for (const item of resp) {
                        var option = $('<option  name="moduleId"></option>');
                        option.text(item.name)
                        console.log(item);
                        option.attr("value", item.moduleId);
                        select.append(option);
                    }
                }
            })

            function requestFinished(resp) {
                var table = $('#body');
               //设置个tbody 清空tbody
               table.empty();
                for (const item of resp) {
                    var tr = $('<tr></tr>');
                    var input = $('<td></td>').append('<input type="checkbox" name="checkbox">');
                    input.attr("value", item.adminId);
                    var adminId = $('<td id="adminId"></td>').text(item.adminId);
                    var name = $('<td></td>').text(item.name)
                    var adminCode = $('<td></td>').text(item.adminCode);
                    var telephone = $('<td></td>').text(item.telephone);
                    var email = $('<td></td>').text(item.email);
                    var enrolldate = $('<td></td>').text(item.enrolldate);
                    var detail = $('<td></td>');
                    var a = $('<a class="summary" onmouseover="showDetail(true,this);" onmouseout="showDetail(false,true);">' +
                        '</a>').text(item.qx);
                    var div = $('<div class="detail_info"></div>').text(item.qx);
                    detail.append(a).append(div);
                    var modi = $('<td class="td_modi"></td>');
                    var input1 = $('<input id="btn1" type="button" value="修改" class="btn_modify">');
                    var input2 = $('<input type="button" value="删除" class="btn_delete">');
                    modi.append(input1).append(input2);

                  var trappend = tr.append(input).append(adminId).append(name).append(adminCode).append(telephone)
                        .append(telephone).append(email).append(enrolldate).append(detail)
                        .append(modi);

                    table.append(trappend);
                }
            }

            $('#selModules').click(function (e) {
                var moduleId = $('#selModules').val();
                //val()里面什么也不用填就能获取值
                // console.log(elem);
                // var elem = +elem1;
                // console.log(elem1);

                // type:"post",
                // data: {
                //     "moduleId": moduleId
                // },
                var data = {
                    "moduleId": moduleId
                }
                var setting = {
                    url: "/admin.do/queryRoleId",
                    method: "post",
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify(data)
                    // success: function (resp) {
                    //
                    //     }
                    //     // location.reload(true);
                    // }
                };
                // $.ajax(setting).done()  执行完干什么
                $.ajax(setting).done(requestFinished)
            })
        })

    </script>
</head>
<body>
<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="<%=request.getContextPath()%>/admins/exit">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <c:import url="../navigation.jsp"/>
    <script>
        var li = document.getElementById("menu").children;
        var title = document.getElementsByTagName('title')[0].textContent;
        for (let i = 0; i < li.length; i++) {
            if (li[i].children[0].className.startsWith(title)){
                li[i].children[0].className = title + '_on';
            }
        }
    </script>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
    <form action="<%=request.getContextPath()%>/admin.do/queryRoleName" method="post">
        <!--查询-->
        <div class="search_add">
            <div>
                模块：
                <select name="moduleId" id="selModules" class="select_search">
                    <option value="">全部</option>
                    <%--<option value="1">角色管理</option>--%>
                    <%--<option value="2">管理员管理</option>--%>
                    <%--<option value="3">资费管理</option>--%>
                    <%--<option value="4">账务账号</option>--%>
                    <%--<option value="5">业务账号</option>--%>
                    <%--<option value="6">账单管理</option>--%>
                    <%--<option value="7">报表</option>--%>
                </select>
            </div>
            <div>角色：<input name="name" type="text" class="text_search width200"/></div>
            <div><input type="submit" value="搜索" class="btn_search"/></div>
            <input type="button" value="密码重置" class="btn_add" onclick="resetPwd()"/>
            <input type="button" value="增加" class="btn_add"
                   onclick="javascript:window.location.href='<%=request.getContextPath()%>/admin/admin_add.jsp';"/>
        </div>
        <!--删除和密码重置的操作提示-->
        <div id="operate_result_info" class="operate_fail">
            <img src="../images/close.png" onclick="this.parentNode.style.display='none';"/>
            <span>删除失败！数据并发错误。</span><!--密码重置失败！数据并发错误。-->
        </div>
        <!--数据区域：用表格展示数据-->
        <div id="data">
            <table id="datalist">
                <thead>
                <tr>
                    <th class="th_select_all">
                        <input type="checkbox" onclick="selectAdmins(this);"/>
                        <span>全选</span>
                    </th>
                    <th>管理员ID</th>
                    <th>姓名</th>
                    <th>登录名</th>
                    <th>电话</th>
                    <th>电子邮件</th>
                    <th>授权日期</th>
                    <th class="width100">拥有角色</th>
                    <th></th>
                </tr>
                </thead>
                <tbody id="body">
                <c:forEach var="adminInfo" items="${adminInfoList}">
                    <tr>
                        <td><input value="${adminInfo.adminId}" name="checkbox" type="checkbox"/></td>
                        <td id="adminId">${adminInfo.adminId}</td>
                        <td>${adminInfo.name}</td>
                        <td>${adminInfo.adminCode}</td>
                        <td>${adminInfo.telephone}</td>
                        <td>${adminInfo.email}</td>
                        <td>${adminInfo.enrolldate}</td>
                        <td>
                            <a class="summary" onmouseover="showDetail(true,this);"
                               onmouseout="showDetail(false,this);"> ${adminInfo.qx}</a>
                            <!--浮动的详细信息-->
                            <div class="detail_info">
                                    ${adminInfo.qx}
                            </div>
                        </td>
                        <td class="td_modi">
                            <input id="btn1" type="button" value="修改" class="btn_modify"/>
                            <input type="button" value="删除" class="btn_delete"/>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

        <script language="javascript" type="text/javascript">

            var id = 1;
            $('#datalist').click(function (e) {
                // namedItem("")
                var id = e.target.parentNode.parentNode.childNodes.item(3).textContent
                var elem = e.target.value
                // var id = $('#btn1').parents().css("tr");
                console.log(id);
                console.log(elem);
                if (elem === "修改") {

                    javascript:window.location.href = '/admin.do/queryAdminInfo?adminId=' + id;
                }
                if (elem === "删除") {
                    javascript:window.location.href = '/admin.do/deleteAdminRole?adminId=' + id;
                }


            })


        </script>

        <!--分页-->
        <div id="pages">
            <a href="<%=request.getContextPath()%>/admin.do/findByPage?page=1">首页</a>
            <a href="<%=request.getContextPath()%>/admin.do/findByPage?page=${currentPage-1}">上一页</a>
            <c:if test="${totalPage}!= 0  ">
                <c:forEach varStatus="i" begin="0" end="${totalPage-1}">
                    <%--<c:forEach items="${totalPage}" var="page">--%>
                    <a href="<%=request.getContextPath()%>/admin.do/findByPage?page=${i.count}">${i.count}</a>
                </c:forEach>
            </c:if>
            <a href="<%=request.getContextPath()%>/admin.do/findByPage?page=${currentPage+1}">下一页</a>
            <a href="<%=request.getContextPath()%>/admin.do/findByPage?page=${totalPage}">末页</a>
        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <p>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
    <span>版权所有(C)云科技有限公司 </span>
</div>
</body>
</html>
